<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="layui/jquery-3.2.1.min.js"></script>
    <script src="layui/layui.js"></script>
    <link href="layui/css/layui.css" rel="stylesheet">
    <script>
        //Demo

        $(function () {
            layui.use('laypage', function(){
                var laypage = layui.laypage;

                //执行一个laypage实例
                laypage.render({
                    elem: 'cutPageDiv' //注意，这里的 test1 是 ID，不用加 # 号
                    ,count: 50, //数据总数，从服务端得到
                    limit:5,
                    jump:function (obj,first) {

                        if(first != 1){
                            //打印页码
                            console.log(obj.curr)
                        }
                    }
                });
            });
            //将复选框中对应的元素进行选中
            var likeArray = ["write","dai"];
            for(var i=0;i<likeArray.length;i++){
                $(":checkbox[name='like'][value='"+likeArray[i]+"']").prop("checked",true);
            }

            //将城市下拉框中，value为2的选项选中
            var cityId=2;
            $("#city").val(cityId);

            layui.use('form', function(){
                var form= layui.form;
                //下拉框、复选框、单选框数据更新后，都需要调用render()，刷新渲染
                form.render();
            });


        });

        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#birthday' //指定元素
            });
        });




    </script>
</head>
<body>
    <div class="layui-container">
         <i class="layui-icon layui-icon-rate-solid" style="font-size: 30px; color: #1E9FFF;"></i>
        <h1>按钮</h1>
        <input type="button" value="提交" class="layui-btn layui-btn-warm">
        <a href="#" class="layui-btn layui-btn-warm">跳转</a><br>

        <a href="#" class="layui-btn layui-btn-normal">
            <i class="layui-icon layui-icon-add-circle"></i>
            添加</a><br>
        表格：
        <table class="layui-table">
            <thead>
                <tr><th>姓名</th><th>性别</th><th>工资</th></tr>
            </thead>
            <tbody>
                <tr><td>张三</td><td>男</td><td>5000</td></tr>
                <tr><td>胡二</td><td>男</td><td>5000</td></tr>
                <tr><td>刘勇</td><td>男</td><td>5000</td></tr>
                <tr><td>李四</td><td>男</td><td>5000</td></tr>
            </tbody>
        </table>
        <div id="cutPageDiv"></div>
        日期：<input id="birthday" class="layui-input" style="width: 100px"></input>

        表单：
        <div class="layui-form">
            <form action="#">
            爱好：
                    <input type="checkbox" name="like" title="写作" value="write">
                    <input type="checkbox" name="like" title="阅读" value="read">
                    <input type="checkbox" name="like" title="发呆" value="dai"><br>
            性别：<input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女">女
            姓名：<input type="text" name="userName"><br>
            下拉框：<select name="city" id="city" lay-verify="required">
            <option value=""></option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">杭州</option>
        </select>
                <input type="submit" value="提交">
            </form>
        </div>
    </div>

</body>
</html>